@import "./common.scss";

.news{
  padding-top: 42px;
  padding-bottom: 88px;
  .container{
    h2{
      color: #ff6b08;
      font-size: 30px;
      padding-bottom: 40px;
    }
    .row{
      display: flex;
      flex-wrap: wrap;
      .news-banner{
        .news-img{
          position: relative;
          border: 2px solid #eeeeee;
          
          font-size: 14px;
          &::after{
            position: absolute;
            display: block;
            content: '技术突破：HTML5裸跑性能已可媲美APP';
            left: 0;
            bottom: 0;
            width: 100%;
            height: 42px;
            text-align: center;
            line-height: 42px;
            color: #fff;
            background-color: rgba(0,0,0,0.3);
            
          }
          img{
            width: 100%;
          }
        }
      }
    }
  }
  
}

.news-content{
  
  .container{
    border-bottom: 1px dashed #d4d4d4;
    .row{
      display: flex;
      flex-wrap: wrap;
      .news-wrapper{
        .content-img{
          border: 1px solid #dddddd;
          padding: 3px;
          img{
            width: 100%;
            
          }
        }
        .news-text{
          display: flex;
          flex-direction: column;
          h2,p{
            margin: 0;
          }
          h2{
            font-size: 18px;
            color: #ff6900;
            padding-bottom: 16px;
          }
          p{
            font-size: 14px;
            color: #2a2a2a;
            padding-bottom: 22px;
          }
          button{
            align-self: flex-end;
            width: 98px;
            height: 32px;
            border-radius: 15px;
            color: #ff6900;
           
            font-size: 14px;
            border: transparent;
            outline: transparent;
            background: transparent;
            border: 1px solid #ff6900;
            cursor: pointer;
            &:hover{
              background-color:  #ff6900;
              color: #ffffff;
            }
          }
          
        }
        &:nth-child(2n){
          margin-bottom: 38px;
        }
        
      }
    }
  }
}

.page{
 text-align: center;
}




@media screen and (max-width:768px){
  .news{
    .container{
      .row{
        .news-banner{
          &:last-child{
            margin-top: 15px;
          }
        }
      }
    }
  }
  .news-content{
    .container{
      .row{
        .news-wrapper{
          display: flex;
          padding-bottom: 38px;
          &:nth-child(2n){
            margin-bottom: 0;
          }
          .content-img{
            display: flex;
          }
        }
        

      }
    }
  }
}

@media screen and (max-width:992px){
  .news-content{
    .container{
      .row{
        .news-wrapper:nth-child(2n){
          .news-text{
            h2{
              font-size: 14px;
              padding-bottom: 10px
            }
            p{
              font-size: 12px;
              padding-bottom: 16px;
            }
            button{
              width: 68px;
              height: 26px;
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}

